
<!-- Button trigger modal -->
<i class="fa fa-th-large tool-btn" (click)="onShowToolBox()" aria-hidden="true" title="ToolsBox" data-toggle="modal" data-target="#ToolsBoxModal"></i>

  <!-- Modal -->
  <div class="modal fade"  id="ToolsBoxModal" tabindex="-1" data-dismiss="modal" role="dialog" aria-labelledby="ToolsBoxModalLabel">
    <div class="modal-dialog" [style.left]="(currentMoveDistance.DistanceX).toString()+'px'"
    [style.top]="(currentMoveDistance.DistanceY).toString()+'px'" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <span class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</span>
          <h4 class="modal-title" id="ToolsBoxModalLabel" >{{CurrentIndex===1?'Choose Tool':CurrentSelected?CurrentTitle:'No Tool Selected'}}</h4>
        </div>
        <div class="modal-body">
            <div [style.display]="CurrentIndex===1?'block':'none'" class="tools-tree">
                <tree 
                [tree]="tree"
                [settings]="settings"
                (nodeSelected)="onNodeSelected($event)"
                #ToolsTree></tree>
            </div>
            <div *ngIf="CurrentIndex!==1">
                <app-tool-panel [ToolId]="SelectedId" (StateVoted)="onReceiveSignal($event)"></app-tool-panel>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-back" (click)="onBackClicked()" [disabled]="CurrentIndex===1">Back</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" *ngIf="CurrentIndex===1" class="btn btn-primary" (click)="onNextClick()">{{ButtonText}}</button>
          <button type="button" *ngIf="CurrentIndex!==1" data-dismiss="modal" [disabled]="!Prepared" (click)="finish()" class="btn btn-primary">{{ButtonText}}</button>
        </div>
      </div>
    </div>
  </div>

